<template>
  <div class="m-theFollowUp">
    <div class="m-searchPanel m-searchPanelA">
      <div class="layout-2">
        <el-form :model="searchForm" :inline="true">
          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item label="记录类型">
                <el-select v-model="searchForm.reportType" placeholder="请选择" clearable>
                  <el-option label="存款" value="100"></el-option>
                  <el-option label="人工存款" value="102"></el-option>
                  <el-option label="回滚取款" value="299"></el-option>
                  <el-option label="取款" value="200"></el-option>
                  <el-option label="转出" value="201"></el-option>
                  <el-option label="转入" value="101"></el-option>
                  <el-option label="开仓佣金" value="81"></el-option>
                  <el-option label="总盈亏" value="128"></el-option>
                  <el-option label="系统清零" value="132"></el-option>
                  <el-option label="调整清零" value="136"></el-option>
                  <el-option label="奖励送出" value="1001"></el-option>
                  <el-option label="奖励扣回" value="1002"></el-option>
                  <el-option label="额度调整-存款调整" value="301"></el-option>
                  <el-option label="额度调整-取消取款" value="303"></el-option>
                  <el-option label="额度调整-手续费调整" value="304"></el-option>
                  <el-option label="额度调整-取款调整" value="302"></el-option>
                  <el-option label="额度调整-系统清零调整" value="305"></el-option>
                  <el-option label="额度调整-账号转款调整" value="306"></el-option>
                  <el-option label="额度调整-赠金送出" value="501"></el-option>
                  <el-option label="额度调整-赠金扣除" value="502"></el-option>
                  <el-option label="额度调整-交易编码扣费" value="503"></el-option>
                  <el-option label="额度调整-交易编码退费" value="504"></el-option>
                  <el-option label="额度调整-其他调整" value="308"></el-option>
                  <el-option label="MT4返佣" value="137"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交易平台">
                <el-select v-model="searchForm.platform" placeholder="请选择" clearable>
                  <el-option label="GTS2" value="GTS2"></el-option>
                  <el-option label="MT4" value="MT4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="input-with-select">
                <el-input placeholder=" " v-model.trim="searchForm.inputFH" clearable>
                  <el-select v-model="searchForm.typeinputFH" slot="prepend" placeholder="请选择" class="selectInputType">
                    <el-option label="提案号" value="pno"></el-option>
                    <el-option label="交易号" value="dealPid"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="searchBtns">
              <el-button type="primary" icon="el-icon-search" @click="search" :loading="dataListLoading">查询</el-button>
              <el-button type="primary" plain icon="el-icon-refresh" @click="reset">重置</el-button>
            </el-col>
          </el-row>
          <el-row :getter="30">
            <el-col :span="12">
              <el-form-item label="加入时间">
                <el-date-picker
                  v-model="searchForm.timeSelect"
                  type="datetimerange"
                  :unlink-panels="true"
                  :default-time="['00:00:00','23:59:59']"
                  format="yyyy-MM-dd HH:mm:ss"
                  :time-arrow-control="true"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="m-dataList" id="m-tableList">
      <el-table
        :data="dataList"
        style="width: 100%"
        v-loading="dataListLoading"
        element-loading-text="loading..."
        :max-height="800"
        ref="dataList"
      >
        <el-table-column
          prop="account_no"
          width="100"
          label="交易账号">
        </el-table-column>
        <el-table-column
          prop="platform"
          label="交易平台"
          width="80">
        </el-table-column>
        <el-table-column
          prop="deal_p_id"
          label="交易号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="trade_time"
          :formatter="countTimeFormat"
          label="加入时间"
          width="160">
        </el-table-column>
        <el-table-column
          prop="bo_report_type"
          label="记录类型"
          width="80">
          <template slot-scope="scope">
            {{scope.row.bo_report_type | reportType}}
          </template>
        </el-table-column>
        <el-table-column
          prop="adjust_sub_type"
          label="子类型"
          width="80">
        </el-table-column>
        <el-table-column
          prop="account_currency"
          label="账户货币"
          width="80">
        </el-table-column>
        <el-table-column
          prop="amount_src"
          label="交易前额度"
          align="right"
          :formatter="countDateMoneyFormat"
          min-width="140">
        </el-table-column>
        <el-table-column
          prop="income"
          align="right"
          :formatter="countDateMoneyFormat"
          label="收入"
          width="140">
        </el-table-column>
        <el-table-column
          prop="expenditure"
          align="right"
          :formatter="countDateMoneyFormat"
          label="支出"
          width="140">
        </el-table-column>
        <el-table-column
          prop="amount_dst"
          label="交易后额度"
          align="right"
          :formatter="countDateMoneyFormat"
          min-width="140">
        </el-table-column>
        <el-table-column
          prop="pno"
          label="提案号"
          min-width="160">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          min-width="160">
        </el-table-column>
      </el-table>
    </div>
    <div class="m-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes=pagination.pageSizeList
        :current-page=pagination.pageNo
        :page-size=pagination.pageSize
        layout="total, sizes, prev, pager, next"
        :total=pagination.total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import * as Utils from '@/utils'
  import * as RealaccountAPI from '@/Api/realaccount'
  export default {
    name: 'TheAccountDetailsQuota',
    data () {
      return {
        searchForm: {
          timeSelect: Utils.thisWeek(),
          inputFH: '',
          typeinputFH: 'dealPid',
          reportType: '',
          platform: ''
        },
        copySearchForm: null,
        pagination: Utils.commonPagination(),
        pickerOptions: Utils.pickerOptions(),
        dataList: [],
        dataListLoading: false,
        ajaxSearchParams:{},
      }
    },
    props: ['type'],
    computed: {
      queryId(){
        return this.$route.params.id.split('_')[1]
      }
    },
    filters: {
      'reportType'(val) {
        let _list = [
          {value: '81', name: '开仓佣金'},
          {value: '100', name: '存款'},
          {value: '101', name: '转入'},
          {value: '102', name: '人工存款'},
          {value: '128', name: '总盈亏'},
          {value: '132', name: '系统清零'},
          {value: '136', name: '调整清零'},
          {value: '137', name: 'MT4返佣'},
          {value: '200', name: '取款'},
          {value: '201', name: '转出'},
          {value: '299', name: '回滚取款'},
          {value: '301', name: '额度调整-存款调整'},
          {value: '302', name: '额度调整-取款调整'},
          {value: '303', name: '额度调整-取消取款'},
          {value: '304', name: '额度调整-手续费调整'},
          {value: '305', name: '额度调整-系统清零调整'},
          {value: '306', name: '额度调整-账号转款调整'},
          {value: '307', name: '额度调整-故障调整'},
          {value: '308', name: '额度调整-其他调整'},
          {value: '350', name: '转移-仅存MT4总盈亏'},
          {value: '500', name: '推荐赠金'},
          {value: '501', name: '额度调整-赠金送出'},
          {value: '502', name: '额度调整-赠金扣除'},
          {value: '503', name: '额度调整-交易编码扣费'},
          {value: '504', name: '额度调整-交易编码退费'},
          {value: '1001', name: '奖励送出'},
          {value: '1002', name: '奖励扣回'},
          {value: '-130', name: '盈亏'}
        ]
        let _obj = _list.filter(item => (item.value == val));
        if (_obj.length >= 1) {
          return _obj[0].name
        } else {
          return val;
        }
      }
    },
    watch: {
      'searchForm.inputFH'(val){
        if (val) {
          this.searchForm.timeSelect = null;
        } else {
          this.searchForm.timeSelect = Utils.thisWeek();
        }
      },
    },
    methods: {
      reset(){
        this.searchForm = Object.assign({}, this.copySearchForm);
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        if (this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      handleCurrentChange(index) {
        this.pagination.pageNo = index;
        this.queryList();

      },
      search(){
        this.ajaxSearchParams = Utils.searchParamsFormat(this.searchForm);
        if (this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      queryList(){
        this.dataListLoading = true;
        if (this.$refs.dataList) {
          this.$refs.dataList.bodyWrapper.scrollTop = 0;
        }
        RealaccountAPI.realaccountInfo2_5(Object.assign({
          queryId: this.queryId,
          pageSize: this.pagination.pageSize,
          pageNo: this.pagination.pageNo - 1
        }, this.ajaxSearchParams))
          .then(res => {
            this.dataListLoading = false;
            if (res.code != '0') {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return
            }
            this.dataList = res.data.content;
            this.pagination.total = res.data.totalElements;
          })
          .catch(error => {
            this.dataListLoading = false;
            console.log(error)
          })
      },
      countTimeFormat(row, column){
        return Utils.countDateTimeFormat(row[column.property])
      },
      countDateMoneyFormat(row, column){
        return Utils.countDateMoneyFormat(row[column.property])
      },
    },
    created(){
      this.copySearchForm = Object.assign({}, this.searchForm);
      this.search()
    }
  }
</script>

<style scoped lang="scss">

</style>
